<section>
<h1>Basic Usage</h1>

<p><strong>Create a root element:</strong></p>
<pre><code><div id="jmpress"></div></code></pre>

<p><strong>Fill it up with steps:</strong></p>
<pre><code><div id="jmpress">
	<div class="step">Slide 1</div>
	<div class="step">Slide 2</div>
</div></code></pre>

<p><strong>Tell jQuery to run it:</strong></p>
<pre><code>$(function() {
	$('#jmpress').jmpress();
});</code></pre>

<p><strong>Configure jmpress</strong><br/>
Don't want to use `.step` as a selector? Okay:</p>
<pre><code>$('#jmpress').jmpress({
	stepSelector: 'li'
});</code></pre>
<p>See more option on next slide</p>

<p><strong>Customize the hash id of each slide</strong><br/>
The id of the step will appear as the URI hash to recall the slide later. If you
don't give your steps ids then the id `step-N` will be used.</p>
<pre><code class="noconvert">&lt;div id=&quot;name-of-slide&quot; class=&quot;step&quot; 
		data-x=&quot;3500&quot; data-y=&quot;-850&quot; 
		data-rotate=&quot;270&quot; data-scale=&quot;6&quot;&gt;
	Slide 1
&lt;/div&gt;</code></pre>

<p><strong>Load slides dynamically</strong><br/>
You can load a slide dynamically by setting the `data-src` or `href` attribute
on the slide. The slide will only be loaded when an adjacent slide or the slide
itself is selected.</p>
<pre><code><div class="step" data-src="slides/slide-1.html" data-x="500" data-y="300">
	Loading...
</div></code></pre>
</section>